<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 5px 0 10px 2px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="delete" @click="batchDel"/>
                删除
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>

        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon">
          </i> 已选择 <a><b>{{ selectedRowKeys.length }}</b></a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">


          <span slot="action" slot-scope="text, record">
             <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
        </span>
          </a-table>
        </div>
        <!-- 表单区域 -->
        <crawl-feature-doc-modal ref="modalForm" @ok="modalFormOk2"></crawl-feature-doc-modal>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import moment from 'moment'
  import JInput from '@/components/jeecg/JInput'
  import CrawlFeatureDocModal from './modules/CrawlFeatureDocModal'


  export default {
    name: "CrawlFeatureDocList",
    mixins: [JeecgListMixin],
    components: {
      JInput,
      moment,
      CrawlFeatureDocModal
    },
    data() {
      return {
        columns:
          [
            {
              title: '文章名称',
              align: 'center',
              dataIndex: 'articleName'
            },
            {
              title: '变量名称',
              align: 'center',
              dataIndex: 'variableName'
            },
            {
              title: '参数值',
              align: 'center',
              dataIndex: 'componentValue',
            },
            {
              title: '参数位置',
              align: 'center',
              dataIndex: 'position',
            },
            {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              scopedSlots: {customRender: 'action'}
            }
          ],
        url: {
          list: "/sys/CrawlFeatureDoc/list",
          eleteBatch: "/sys/CrawlFeatureDoc/deleteBatch",
          delete: '/sys/CrawlFeatureDoc/delete',
          deleteBatch: "/sys/CrawlFeatureDoc/deleteBatch",
        },
      }
    },
    methods: {

      handleEdit: function (record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'
      },

      handleDelete1: function (id) {
        this.handleDelete(id)
      },

      handleMenuClick(e) {
        if (e.key == 1) {
          this.batchDel();
        }
      },
    }
  }
</script>

<style scoped>
  /deep/.ant-card-body {
    padding: 2px;
    zoom: 1;
  }
</style>